import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
import {FN1, FN2} from './mutation-types'


Vue.use(Vuex)

// 实例化状态管理的仓库
// state -> 数据声明
// actions -> 方法(ajax方法)
// mutations -> 方法(直接操作state中的数据)
//
const store = new Vuex.Store({
  // state中是数据声明 响应式数据

      state:{
        count:1,
        msg:'abc'
      },

      // getter
      // getter中也是写数据的
      // 如果数据A依赖了数据B 把数据A写在getter
      getters:{
        revmsg(state){
          return state.msg.split('').reverse().join('')
        }
      },

      // mutations修改state中数据的方法
      mutations:{
        [FN1](state){
          state.count++
        },
        [FN2](state,num){
          state.count+=num
        },
        fn4(state,obj){
          // {type: "fn4", num: 100}
          console.log(obj)
            state.count++
        },
        fn5(state){
          setTimeout(()=>{
            state.count++
          },2000)
        },
        fn6(state){
          state.count++
        }
      },
      // actions
      actions:{
        acfn1(context){
          setTimeout(()=>{
          context.commit('fn6')
          },2000)
        }
      }
})

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})
